<template>
    <div>
        <!-- <div class="seach">
      <el-date-picker
        clearable
        v-model="Time"
        type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="setTime"    
      >
      </el-date-picker>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        @click="handleQuery"
        style="margin-left: 20px"
        >搜索
      </el-button>
    </div> -->
        <div class="tab">
            <h1><em>发泡蜡车间残次品统计</em></h1>
            
            <el-table :data="tableData" style="width: 100%;"
                :header-cell-style="{ background: '#6eaef5', color: '#ffffff', 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" border>
                <el-table-column prop="defectiveNumA" label="蜡脏">
                </el-table-column>
                <el-table-column prop="defectiveNumB" label="灯芯偏">
                </el-table-column>
                <el-table-column prop="defectiveNumB" label="液面气泡不平整">
                </el-table-column>
                <el-table-column prop="defectiveNumB" label="胎膜破口">
                </el-table-column>
                <el-table-column prop="defectiveNumE" label="蜡杂质">
                </el-table-column>
                <el-table-column prop="defectiveNumF" label="其他">
                </el-table-column>
            </el-table>
        </div>
      
        <div class="count" ref="count1" style="height: 300px"></div>
        <div class="count" ref="count2" style="height: 300px"></div>
        <div class="count" ref="count3" style="height: 300px"></div>
        <div class="count" ref="count4" style="height: 300px"></div>
        <div class="count" ref="count5" style="height: 300px"></div>
        <div class="count" ref="count6" style="height: 300px"></div>

    </div>
</template>
<script>
import * as echarts from 'echarts';
import { listDefective, lineDefective } from '@/api/system/defective.js'
export default {
    data() {
        return {
            tableData: [],
            cLine1: [],
            cLine2: [],
            cLine3: [],
            cLine4: [],
            cLine5: [],
            cLine6: [],
            date: [],
            Time: "",
            checkTimeStart: null,
            checkTimeEnd:null

        };
    },
    mounted() {
        this.defectiveGet()
        // this.getLine()
        // this.getCount1()
        // this.getCount2()
        // this.getCount3()
        // this.getCount4()
        // this.getCount5()
        // this.getCount6()


    },
    methods: {
        // 开始时间结束时间
      setTime(e) {
        this.checkTimeStart = e[0]
        this.checkTimeEnd = e[1]
      },

        defectiveGet() {
            // listDefective(this.checkTimeStart,this.checkTimeEnd).then(res => {
            //     console.log(res);
            //     this.tableData = res.data
            // })
            listDefective().then(res => {
                // console.log(res);
                this.tableData = res.rows

            })
        },
        handleQuery() {
            // this.getLine()
     this.defectiveGet()
    },
        getLine() {
            // console.log(this.Time);
            lineDefective(this.Time).then(res => {
                // console.log(res);
                this.cLine1 = res.data[0]
                this.cLine2 = res.data[1]
                this.cLine3 = res.data[2]
                this.cLine4 = res.data[3]
                this.cLine5 = res.data[4]
                this.cLine6 = res.data[5]
                this.date = res.data[6]
                this.getCount1()
                this.getCount2()
                this.getCount3()
                this.getCount4()
                this.getCount5()
                this.getCount6()

            })

        },
        getCount1() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count1);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                data:['蜡脏'],
            },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                series: [
                    {
                        name: "蜡脏",
                        data: this.cLine1,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount2() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count2);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                data:['灯芯偏'],
            },
                tooltip: {
                   
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                
                series: [
                    {
                        name: "灯芯偏",
                        data: this.cLine2,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount3() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count3);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                data:['液面气泡不平整'],
            },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                series: [
                    {
                        name:'液面气泡不平整',
                        data: this.cLine3,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount4() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count4);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                data:['胎膜破口'],
            },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                series: [
                    {         
                        name:"胎膜破口",
                        data: this.cLine4,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount5() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count5);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                data:['蜡杂质'],
            },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                series: [
                    {
                        name:'蜡杂质',
                        data: this.cLine5,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
        getCount6() {
            // console.log(this.date);
            const e = echarts.init(this.$refs.count6);
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.date,
                    name: '时间'
                },
                yAxis: {
                    type: 'value',
                    name: '个数'
                },
                legend: {
                data:['其他'],
            },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                series: [
                    {
                        name:'其他',
                        data: this.cLine6,
                        type: 'line',
                        markPoint: {
                            data: [
                                {
                                    type: "max",
                                },
                                {
                                    type: "min",
                                },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average" }],
                        },
                    }
                ]
            };
            e.setOption(option);
        },
    },
    components: {},
    props: {},
    watch: {},
    computed: {},
    created() { },
};
</script>
<style lang="scss" scoped>
.tab {
    // #6eaef5
    width: 70%;
    margin: 60px auto;

    h1 {
        text-align: center;
        color: #6280c6;
        font-size: 35px;

    }
}
.seach{
    text-align: right;
    width: 90%;
    // border: 1px red solid;
    margin-top: 20px;
    // margin-right: 10% ;
}
</style>